<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
	<!--<![endif]-->

	<head>
		<meta charset="utf-8">
		<title>选填信息</title>

		<!-- Mobile Meta -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Web Fonts -->

		<!-- Bootstrap core CSS -->
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

		<!-- Plugins -->
		<link href="plugins/rs-plugin/css/settings.css" media="screen" rel="stylesheet">

		<link href="plugins/owl-carousel/owl.carousel.css" rel="stylesheet">

		<!-- iDea core CSS file -->
		<link href="bootstrap/css/style.css" rel="stylesheet">

		<!-- Color Scheme (In order to change the color scheme, replace the red.css with the color scheme that you prefer)-->
		<link href="css/skins/green.css" rel="stylesheet">

	</head>

	<body class="front">
		<!-- scrollToTop -->
		<!-- ================ -->
		<div class="scrollToTop"><i class="icon-up-open-big"></i></div>

		<!-- page wrapper start -->
		<!-- ================ -->
		<div class="page-wrapper">

			<!-- main-container start -->
			<!-- ================ -->
			<section>
				<div class="section ">
					<div class="container">
						<div class="row">
							<div class="col-md-12 mb-20">
								<h1 class="text-center ">在线预订</h1>
								<div class="separator "></div>

							</div>
							<div class="col-md-3 col-xs-6 mb-10 yuding_4bu"><span>1</span>
								<font>选填信息</font>
							</div>
							<div class="col-md-3 col-xs-6 mb-10 yd1_4bu"><span>2</span>
								<font>确认信息</font>
							</div>
							<div class="col-md-3 col-xs-6 yd1_4bu"><span>3</span>
								<font>支付金额</font>
							</div>
							<div class="col-md-3 col-xs-6 yd1_4bu"><span>4</span>
								<font>完成预订</font>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- main-container end -->

			<section class="main-container  ">

				<div class="container">
					<div class="row">

						<div class="col-md-12 ">

							<p class="wenti_p">一：选择主题</p>

						</div>
					</div>

					<!--主题圆圈-->
					<div class="row">
						<div class="col-md-2 col-xs-4 pl-5 pr-5 yd_zhuti ">
							<div class="box-style-1  zhuti_6_hover">
								<div class="overlay-container">
									<img src="img/icon-1.png" alt="生日聚会">
								</div>
								<h5>生日聚会</h5>
							</div>
						</div>
						<div class="col-md-2 col-xs-4 pl-5 pr-5  ">
							<div class="box-style-1 zhuti_6">
								<div class="overlay-container"> <img src="img/icon-2.png" alt="同学聚会"> </div>

								<h5>同学聚会</h5>
							</div>
						</div>
						<div class="col-md-2  col-xs-4 pl-5 pr-5 ">
							<div class="box-style-1 zhuti_6">
								<div class="overlay-container"> <img src="img/icon-3.png" alt="老友聚会"> </div>

								<h5> 老友聚会 </h5>
							</div>
						</div>
						<div class="col-md-2  col-xs-4 pl-5 pr-5 ">
							<div class="box-style-1 zhuti_6">
								<div class="overlay-container"> <img src="img/icon-4.png" alt="情侣度假"> </div>

								<h5> 情侣度假 </h5>
							</div>
						</div>
						<div class="col-md-2  col-xs-4 pl-5 pr-5  ">
							<div class="box-style-1 zhuti_6">
								<div class="overlay-container"> <img src="img/icon-5.png" alt="战友聚会"> </div>

								<h5> 战友聚会 </h5>
							</div>
						</div>
						<div class="col-md-2  col-xs-4 pl-5 pr-5  ">
							<div class="box-style-1 zhuti_6 ">
								<div class="overlay-container"> <img src="img/icon-6.png" alt="公司团建"> </div>

								<h5> 公司团建 </h5>
							</div>
						</div>
					</div>
					<!--/主题圆圈-->

					<!--注意事项-->

					<!--/注意事项 -->

					<!--选择时间-->
					<div class="row">
						<div class="col-md-12 pl-0 pr-0 ">

							<p class="wenti_p">二：选择时间</p>

							<table class="table cart table-hover table-striped">
								<thead>
									<tr>
										<th class="amount">星期一</th>
										<th class="amount">星期二 </th>
										<th class="amount">星期三</th>
										<th class="amount">星期四</th>
										<th class="amount">星期五</th>
										<th class="amount">星期六</th>
										<th class="amount">星期天</th>
									</tr>
								</thead>
								<tbody>
									<tr class="remove-data">
										<td class="no">
											<font>4月1日</font><small>过去式</small></td>
										<td class="no">
											<font>4月2日</font><small>过去式</small></td>
										<td class="no">
											<font>4月3日</font><small>过去式</small></td>
										<td class="no">
											<font>4月4日</font><small>过去式</small></td>
										<td class="no">
											<font>4月5日</font><small>过去式</small></td>
										<td class="no">
											<font>4月6日</font><small>过去式</small></td>
										<td class="no">
											<font>4月7日</font><small>过去式</small></td>
									</tr>
									<tr class="remove-data">
										<td class="no">
											<font>4月8日</font><small>过去式</small></td>
										<td class="no">
											<font>4月9日</font><small>过去式</small></td>
										<td class="no">
											<font>4月10日</font><small>过去式</small></td>
										<td class="no">
											<font>4月11日</font><small>过去式</small></td>
										<td class="yuding">
											<font>4月12日</font><small>已预订</small></td>
										<td class="yuding">
											<font>4月13日</font><small>已预订</small></td>
										<td class="yuding">
											<font>4月14日</font><small>已预订</small></td>
									</tr>
									<tr class="remove-data">
										<td class="no">
											<font>4月15日</font><small>过去式</small></td>
										<td class="no">
											<font>4月16日</font><small>过去式</small></td>
										<td class="no">
											<font>4月17日</font><small>过去式</small></td>
										<td class="no">
											<font>4月18日</font><small>过去式</small></td>
										<td class="yuding">
											<font>4月19日</font><small>已预订</small></td>
										<td class="yuding">
											<font>4月20日</font><small>已预订</small></td>
										<td class="yuding">
											<font>4月21日</font><small>已预订</small></td>
									</tr>
									<tr class="remove-data">
										<td>
											<font>4月22日</font><small>可预订</small></td>
										<td>
											<font>4月23日</font><small>可预订</small></td>
										<td>
											<font>4月24日</font><small>可预订</small></td>
										<td>
											<font>4月25日</font><small>可预订</small></td>
										<td>
											<font>4月26日</font><small>可预订</small></td>
										<td class="xuanzhong" data-title="4月27日星期六">
											<font>4月27日</font><small>已选中</small></td>
										<td class="xuanzhong" data-title="4月28日星期天">
											<font>4月28日</font><small>已选中</small></td>
									</tr>
									<tr class="remove-data">
										<td>
											<font>4月28日</font><small>可预订</small></td>
										<td>
											<font>4月29日</font><small>可预订</small></td>
										<td>
											<font>4月30日</font><small>可预订</small></td>
										<td>
											<font>5月01日</font><small>可预订</small></td>
										<td>
											<font>5月02日</font><small>可预订</small></td>
										<td>
											<font>5月03日</font><small>可预订</small></td>
										<td>
											<font>5月04日</font><small>可预订</small></td>
									</tr>

									<tr>
										<td colspan="7">提示：同一时间内，小院只接受一次预订，不同时接待多家。 </td>
									</tr>
								</tbody>
							</table>

						</div>
					</div>
					<!--/选择时间-->

					<!--选填信息-->
					<div class="col-md-12 ">
						<p class="wenti_p">三：选填信息</p>

					</div>

					<div class="row">
						<form role="form">
							<div class="col-md-4">
								<div class="form-group">
									<label>您的称呼 *</label>
									<input type="text" id="xingming" class="form-control" value="1">
								</div>
							</div>
							<div class="col-md-4">
								<div class="form-group">
									<label>您的手机号 *</label>
									<input type="text" id="shouji" class="form-control" value="1">
								</div>
							</div>
							<div class="col-md-4">
								<div class="form-group">
									<label>总人数 *</label>
									<input type="text" id="renshu" class="form-control" value="1">
								</div>
							</div>

							<div class="col-md-12">
								<div class="form-group">
									<label>其他您想补充的内容</label>
									<textarea class="form-control" id="neirong" rows="3"></textarea>
								</div>
							</div>
							<div class="col-md-4">
								<div class="form-group">
									<label>是否需要发票<span>(费用增加4%)</span></label>
									<select class="form-control">
										<option>不需要</option>
										<option>需要</option>
									</select>
								</div>
							</div>
							<div class="col-md-4">
								<div class="form-group">
									<label>发票抬头公司名称</label>
									<input type="text" id="taitou" class="form-control" placeholder="" disabled>
								</div>
							</div>

							<div class="col-md-2">
								<div class="form-group">
									<label>请输入验证码 *</label>
									<input type="text" id="yanzhengma" class="form-control" value="">
								</div>
							</div>
							<div class="col-md-2">
								<div class="form-group">
									<label><img src="images/yanzhengma.jpg" alt=""/></label>
									<a href="#" class="btn btn-success" data-toggle="modal" data-target="#myModal">点击提交</a>
								</div>
							</div>

						</form>
					</div>
					<!-- /选填信息 -->

				</div>
			</section>

		</div>
		<!-- page-wrapper end -->
		<!-- 弹出提示信息 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title" id="myModalLabel">验证码输入错误，点击验证码刷新重新输入</h4>
					</div>

				</div>
			</div>
		</div>
		<!-- 弹出提示信息结束 -->
		<!-- JavaScript files placed at the end of the document so the pages load faster
		================================================== -->
		<!-- Jquery and Bootstap core js files -->
		<script type="text/javascript" src="bootstrap/js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

	</body>

</html>